<template>
  <div class="box" id="box">
    <!-- 待处理：遮藏层仅在初次访问首页时出现,跳转回首页遮藏层不出现 -->
    <div class="overlay">
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper">
          <van-image
            @click="$router.push('/leaflet')"
            lazy-load
            width="80%"
            src="https://pic.flyco.net.cn/mall/cms/promotion/20200401/20200401-pop.png?q=1"/>
        <van-icon name="close" color="white" size="40px" style="position:fixed;top:0;"/>
      </div>
      </van-overlay>
    </div>
    <div class="header">
      <img src="https://pic.flyco.net.cn/mall/logo-wap.png" alt="" />
        <router-link to="/search">
          <van-icon name="search" />
        </router-link>
    </div>
    <div class="content" >
      <router-link to='/leaflet'>
        <img src="https://pic.flyco.net.cn/mall/cms/promotion/20200401/20200401-wap.jpg" alt="" style="width:100%;"/>
      </router-link>
      <div style="margin: 0 10px;">
        <van-image
          lazy-load
          width="100%"
          height="100%"
          src="https://m.flyco.com/aliyun/images/home/test4.png"/>
      </div>
      <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
       <van-swipe-item v-for="item1 of bannerlist" :key="item1.bannerid">
         <van-image
           lazy-load
           width="auto%"
           height="auto"
           :src="item1.img"/>
       </van-swipe-item>
      </van-swipe>
      </div>
      <Ranking></Ranking>
      <Show :homepic="homepic"></Show>
    <div style="margin: 0 10px;">
      <van-image
         lazy-load
         width="100%"
         height="100%"
         src="https://pic.flyco.net.cn/mall/cms/home/scene.png"
        />
    </div>
    <ul class="hotlist" :typelist="typelist">
      <li class="hotitem" v-for="(item, index) of typelist" :key="index" @click="toSearch">
        <div class="itemimg" :style="randomRgb(index, 0.3)">
          <van-image
            lazy-load
            width="66"
            height="66"
            :src="item.img"
            style="position: relative;left:.08rem;"
           />
        </div>
        <div class="iteminfo" style="margin-top: .05rem;">
          <p>{{ item.name }}</p>
        </div>
      </li>
    </ul>
    <div class="fixright" >
        <div class="right" v-if="flag" @click="top">
          <img src="https://pic.flyco.net.cn/sources/service/ftop.jpg"/>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Ranking from '@/components/ranking'
import Show from '@/components/show'
import { getProlist, getHomepiclist, getBannerlist } from '@/api'
import { Swipe, SwipeItem, Lazyload, Icon, Image, Overlay, Button } from 'vant'
Vue.use(Icon)
Vue.use(Image)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
Vue.use(Overlay)
Vue.use(Button)
export default {
  data () {
    return {
      flag: false, // 返回顶部图标显示状态
      show: true, // 遮藏层显示状态
      hotlist: [],
      homepic: [],
      list: [
        { pic: 'icon-daishouhuo', name: '全场69包邮' },
        { pic: 'icon-gongchangguanli', name: '工厂正品直发' },
        { pic: 'icon-gifs', name: '享好礼省多咩' },
        { pic: 'icon-diqiu', name: '全国网点 联保服务' }
      ],
      typelist: [
        { name: '加湿器', img: 'https://pic.flyco.net.cn/mall/goods/FH9223/38ab3967d9954bb6be28e05ec82fca84.png' },
        { name: '女士剃毛器', img: 'https://pic.flyco.net.cn/mall/goods/FS5501/80505a3e7f9f47679f9074fc2f15a873.png' },
        { name: '健康秤', img: 'https://pic.flyco.net.cn/mall/goods/FH7012/08c2c8c84b21451f8dcae1c0db032c0f.png' },
        { name: '熨烫机', img: 'https://pic.flyco.net.cn/mall/goods/FI9310/4591c40bab9644cd9f0b1c728a272718.png' },
        { name: '吸尘器', img: 'https://pic.flyco.net.cn/mall/goods/FC9703/b4d1da23c84f44ddab1b7287676348fd.png' },
        { name: '空气净化器', img: 'https://pic.flyco.net.cn/mall/goods/FP9001/40fc8b04ea6e45fd9d0fb93664a6f4d6.png' },
        { name: '配件', img: 'https://pic.flyco.net.cn/mall/goods/FR8DW/7de4c4a0c74d40699e39ee95516af56d.png' }
      ],
      bannerlist: []
    }
  },
  components: {
    Show,
    Ranking
  },
  mounted () {
    getProlist().then(res => {
      this.hotlist = res.data.data
    })
    getHomepiclist().then(res => {
      this.homepic = res.data.data
    })
    getBannerlist().then(res => {
      this.bannerlist = res.data.data
    })
    document.getElementById('box').addEventListener('scroll', this.handleScroll, false)
  },
  methods: {
    handleScroll () {
      const scrollTop = document.getElementById('box').scrollTop
      if (scrollTop > 400) {
        this.flag = true
      } else {
        this.flag = false
      }
      console.log(scrollTop)
    },
    top () {
      console.log(document.getElementById('box').scrollTop)
      const back = setInterval(fa, 20)
      function fa () {
        var scrollTop = document.getElementById('box').scrollTop
        const a = scrollTop - scrollTop / 5
        document.getElementById('box').scrollTop = a
        if (a < 1) {
          document.getElementById('box').scrollTop = 0
          clearInterval(back)
        }
      }
    },
    // 添加对应图标
    addIcon (index) {
      return 'iconfont ' + (this.list[index].pic)
    },
    toSearch (type) {
      console.log(type)
      this.$router.push({ path: '/search/' })
    },
    // 生成随机颜色
    randomRgb (item, a) {
      const R = Math.floor(Math.random() * 255)
      const G = Math.floor(Math.random() * 255)
      const B = Math.floor(Math.random() * 255)
      return {
        width: (item.num / item.total * 100) + '%', // 进度条
        background: 'rgb(' + R + ',' + G + ',' + B + ',' + a + ')'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.overlay {
  position: relative;
  z-index: 1000;
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}
.header {
  position: absolute;
  z-index: 998;
  width: 100%;
  padding: .05rem .1rem;
  img {
    width: .7rem;
    position: absolute;
    left:0;
  }
  .van-icon {
    float: right;
    font-size: .16rem;
    color: white;
  }
}
.banner {
  width:90%;
  margin:0 auto;
  margin-bottom: .2rem;
  border-radius:.2rem;
  overflow:hidden;
}
.hotlist {
  @include clearfix();
  @include rect(100%,auto);
  overflow: auto;
  white-space: nowrap;
  .hotitem {
    display:inline-block;
    @include rect(80px,auto);
    @include margin(0.1rem);
    .itemimg {
      @include rect(100%, auto);
      @include display(block);
      border-radius: .1rem;
      overflow: hidden;
      img {
        @include rect(100%,auto);
        @include display(block);
      }
    }
    .iteminfo {
      @include rect(100%,auto);
      @include display(block);
      p {
        text-align: center;
        font-size: .14rem;
        line-height: .25rem;
      }
    }
  }
}
</style>
